<template>
  <div>
    <el-card>
      <!-- 面包屑 -->
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>专区商品管理</el-breadcrumb-item>
      </el-breadcrumb>
      <!-- 按钮数据 -->
      <el-row type="flex" justify="left" style="margin-bottom: 8px">
        <el-button icon="el-icon-top" size="small" @click="updateBanner(1)">销售
        </el-button>
        <el-button icon="el-icon-bottom" size="small" @click="updateBanner(0)">下架
        </el-button>
        <el-button icon="el-icon-view" size="small" @click="updateBanner(2)">仅展示
        </el-button>
        <div style="margin-left: 15px;">
          <el-select v-model="productStatus" @change="searchHandle" size="small" placeholder="请选择商品状态" filterable>
            <el-option label="全部" value="-1"></el-option>
            <el-option label="已下架" value="0"></el-option>
            <el-option label="销售中" value="1"></el-option>
            <el-option label="仅展示" value="2"></el-option>
          </el-select>
        </div>
        <div style="margin-left: 15px;">
          <el-input placeholder="请输入商品名" size='small' v-model="productName" @clear="searchHandle" style="width: 243px;"
            class="input-with-select" clearable>
            <el-button slot="append" @click="searchHandle" icon="el-icon-search"></el-button>
          </el-input>
        </div>
      </el-row>
      <!-- 表格数据 -->
      <el-table :data="dataList" @selection-change="selectChange" height="640" border style="width: 100%">
        <el-table-column type="selection" width="55"> </el-table-column>
        <el-table-column prop="productSort" label="排序" width="80">
        </el-table-column>
        <el-table-column prop="productId" label="编号" width="80">
        </el-table-column>
        <el-table-column prop="productPic" label="图片" width="120">
          <template slot-scope="scope">
            <el-image :src="url + 'zhonghui/product/' + scope.row.productPic" class="image-control" :previewSrcList="[
              url + 'zhonghui/product/' + scope.row.productPic,
            ]"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="productName" label="品名">
        </el-table-column>
        <el-table-column prop="productStatus" label="状态" width="120">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.productStatus == 0" type="danger">已下架</el-tag>
            <el-tag v-else-if="scope.row.productStatus == 2" type="warning">仅展示</el-tag>
            <el-tag v-else type="success">销售中</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="标识" width="120">
          <template slot-scope="prop">
            <el-tag v-if="prop.row.productFlag == 0" type="success">普通商品</el-tag>
            <el-tag v-else-if="prop.row.productFlag == 1" type="danger">特殊商品</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="分类" width="120">
          <template slot-scope="prop">
            <span>{{ prop.row.categoryId | getCateName }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="inventory" label="库存" width="120"></el-table-column>
        <el-table-column prop="productPrice" label="商品展示价" width="120"></el-table-column>
        <el-table-column prop="productSales" label="销量" width="120"></el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <el-button icon="el-icon-edit" @click="detailMessage(scope.row)" type="text" size="small">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 表格中的页脚 -->
      <!-- 页码 -->
      <div class="pagination-control">
        <el-pagination :page-sizes="[20, 50, 80, 100]" :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper" :total="totalCount" @size-change="sizeChange"
          @current-change="currentChange"></el-pagination>
      </div>
      <!-- 详情弹窗 -->
      <el-dialog title="详情" :visible.sync="addDialogVisible" width="60%">
        <div style="margin-top: -30px">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <!-- 切换一 -->
            <el-tab-pane label="商品详情" name="first">
              <!-- ref="firstRef"   -->
              <el-form ref="firstRef" :model="firstForm" label-width="80px">
                <el-form-item label="商品主图">
                  <el-upload action="aa" class="avatar-uploader" :on-change="proChange" :auto-upload="false" accept="*"
                    ref="firstRefPic" :show-file-list="false">
                    <img v-if="firstForm.file == ''" :src="firstForm.imageUrl" class="avatar" />
                    <img v-else :src="firstForm.uploadImg" class="avatar" />
                  </el-upload>
                </el-form-item>
                <el-form-item label="商品名称" prop="productName">
                  <el-input v-model="firstForm.productName"></el-input>
                </el-form-item>
                <el-form-item label="副标题" prop="productTitle">
                  <el-input v-model="firstForm.productTitle"></el-input>
                </el-form-item>
                <el-form-item label="排序">
                  <el-input v-model="firstForm.productSort"></el-input>
                  <div class="sortTip">tips：数值越大，在列表中越靠前，最小数值为1</div>
                </el-form-item>
                <el-form-item label="库存">
                  <el-input v-model="firstForm.inventory"></el-input>
                </el-form-item>
                <el-form-item label="展示价">
                  <el-input v-model="firstForm.productPrice"></el-input>
                </el-form-item>

                <el-form-item label="销量">
                  <el-input v-model="firstForm.productSales"></el-input>
                </el-form-item>
                <el-form-item label="商品标识">
                  <el-select v-model="firstForm.productFlag" placeholder="请选择">
                    <el-option label="普通商品" value="0"></el-option>
                    <el-option label="特殊商品" value="1"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="商品分类">
                  <el-select v-model="firstForm.categoryId" placeholder="请选择">
                    <el-option v-for="(item, index) in cateList" :key="index" :label="item.categoryName"
                      :value="item.categoryId"></el-option>
                  </el-select>

                </el-form-item>
              </el-form>
              <div class="btn-box">
                <el-button size="small" type="primary" @click="firstProOk()">确定</el-button>
                <el-button size="small" @click="closefirstPro()">取消</el-button>
              </div>
            </el-tab-pane>
            <!-- 切换二 -->
            <el-tab-pane label="规格详情" name="second">
              <el-button icon="el-icon-plus" size="small" style="margin-bottom: 8px" @click="secondAdd()">添加
              </el-button>
              <el-table :data="formarts" border style="width: 100%" @selection-change="selectChange2"
                :header-cell-style="{ background: '#409EFF', color: '#FFF' }">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="formatId" label="编号" width="80">
                </el-table-column>
                <el-table-column label="规格图片" width="200">
                  <template slot-scope="prop">
                    <el-upload action="aa" class="avatar-uploader" :on-change="(file, fileList) =>
                      formartChange(file, fileList, prop.$index)
                      " :auto-upload="false" accept="*" ref="addFormart" :show-file-list="false">
                      <img v-if="prop.row.formart_pic == ''" :src="prop.row.imageUrl" class="avatar" />
                      <img v-else :src="prop.row.uploadImg" class="avatar" />
                    </el-upload>
                  </template>
                </el-table-column>
                <el-table-column prop="formatName" label="产品规格">
                  <template slot-scope="prop">
                    <el-input v-model="prop.row.formatName"></el-input>
                  </template>
                </el-table-column>
                <el-table-column prop="formatPrice" label="原价">
                  <template slot-scope="prop">
                    <el-input v-model="prop.row.formatPrice"></el-input>
                  </template>
                </el-table-column>
                <!-- <el-table-column prop="formatSpecial" label="股东价">
                  <template slot-scope="prop">
                    <el-input v-model="prop.row.formatSpecial"></el-input>
                  </template>
                </el-table-column> -->
                <el-table-column prop="formatInventory" label="规格库存">
                  <template slot-scope="prop">
                    <el-input v-model="prop.row.formatInventory"></el-input>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="200">
                  <template slot-scope="prop">
                    <el-button @click="subformSecond(prop.row)" size="small">
                      保存
                    </el-button>
                    <el-button @click="delformSecond(prop.row)" size="small">
                      删除
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <!-- 切换三 -->
            <el-tab-pane label="轮播图" name="third">
              <el-row style="margin-bottom: 8px">
                <el-button icon="el-icon-plus" size="small" @click="thirdAdd()">添加
                </el-button>
                <el-button icon="el-icon-delete" size="small" @click="threeSwitchStatus(0)">删除
                </el-button>
                <el-button size="small" @click="threeSwitchStatus(1)">启用
                </el-button>
                <el-button icon="el-icon-circle-close" size="small" @click="threeSwitchStatus(2)">禁用
                </el-button>
              </el-row>
              <el-table :data="formData3" border style="width: 100%" @selection-change="selectChange3">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="productId" label="编号" width="275">
                </el-table-column>
                <!-- 缩略图 -->
                <el-table-column prop="productPic" label="图片" width="270">
                  <template slot-scope="scope">
                    <el-image style="width: 50px; height: 50px" :src="url + 'zhonghui/bannerPic/' + scope.row.picName"
                      fit="cover" :previewSrcList="[
                        url + 'zhonghui/bannerPic/' + scope.row.picName,
                      ]"></el-image>
                  </template>
                </el-table-column>
                <el-table-column prop="picStatus" label="状态" width="270">
                  <template slot-scope="prop">
                    <el-tag v-if="prop.row.picStatus == 2" type="danger">禁用</el-tag>
                    <el-tag v-if="prop.row.picStatus == 1" type="success">启用</el-tag>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <!-- 切换四 -->
            <el-tab-pane label="详情图" name="fourth">
              <el-row style="margin-bottom: 8px">
                <el-button icon="el-icon-plus" size="small" @click="fourAdd()">添加
                </el-button>
                <el-button icon="el-icon-delete" size="small" @click="fourSwitchStatus(0)">删除
                </el-button>
                <el-button size="small" @click="fourSwitchStatus(1)">启用
                </el-button>
                <el-button icon="el-icon-circle-close" size="small" @click="fourSwitchStatus(2)">禁用
                </el-button>
              </el-row>
              <el-table :data="formData4" border style="width: 100%" @selection-change="selectChange4">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="productId" label="编号" width="275">
                </el-table-column>
                <!-- 缩略图 -->
                <el-table-column prop="picName" label="图片" width="270">
                  <template slot-scope="scope">
                    <el-image style="width: 50px; height: 50px" :src="url + 'zhonghui/detailPic/' + scope.row.picName"
                      fit="cover" :previewSrcList="[url + 'zhonghui/detailPic/' + scope.row.picName]"></el-image>
                  </template>
                </el-table-column>
                <el-table-column prop="picStatus" label="状态" width="270">
                  <template slot-scope="prop">
                    <el-tag v-if="prop.row.picStatus == 2" type="danger">禁用</el-tag>
                    <el-tag v-else-if="prop.row.picStatus == 0" type="success">删除</el-tag>
                    <el-tag v-else type="success">启用</el-tag>
                  </template>
                </el-table-column>
              </el-table></el-tab-pane>
          </el-tabs>
        </div>
      </el-dialog>
      <!-- 2添加规格 -->
      <el-dialog title="添加规格" :visible.sync="addFormartdialog" width="452px" :before-close="closeAddFormartDialog">
        <div>
          <el-form ref="addFormartRef" :model="formart" label-width="80px">
            <el-form-item label="产品规格" prop="formart_name" :rules="{
              required: true,
              message: '请填写产品规格',
              trigger: 'change',
            }">
              <el-input v-model="formart.formart_name"></el-input>
            </el-form-item>
            <el-form-item label="原价" prop="formart_price" :rules="{
              required: true,
              message: '请填写原价',
              trigger: 'change',
            }">
              <el-input v-model="formart.formart_price"></el-input>
            </el-form-item>
            <el-form-item label="股东价" prop="format_VipPrice" :rules="{
              required: true,
              message: '请填写股东价',
              trigger: 'change',
            }">
              <el-input v-model="formart.format_VipPrice"></el-input>
            </el-form-item>
            <el-form-item label="库存" prop="inventory" :rules="{
              required: true,
              message: '请填写库存',
              trigger: 'change',
            }">
              <el-input v-model="formart.inventory"></el-input>
            </el-form-item>
            <el-form-item label="图片" prop="file" :rules="{
              required: true,
              message: '请选择图片',
              trigger: 'change',
            }">
              <el-upload action="aa" class="avatar-uploader" :on-change="forPicChange" :auto-upload="false" accept="*"
                ref="addFormart" :show-file-list="false">
                <img v-if="formart.file" :src="formart.imageUrl" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeAddFormartDialog">取 消</el-button>
          <el-button type="primary" @click="submitAddFormartDialog">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 3详情弹窗-轮播图弹窗 -->
      <el-dialog title="添加轮播图" :visible.sync="addLoopdialog" width="452px" :before-close="closeAddLoopDialog">
        <div>
          <el-form ref="addLoopRef" :model="formart" label-width="80px">
            <el-form-item label="轮播图">
              <el-upload action="aa" :on-remove="loopRemove" :on-change="loopChange" class="upload-demo" multiple
                ref="loopAddList" :auto-upload="false" :file-list="fileList" list-type="picture">
                <el-button size="small" icon="el-icon-upload">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeAddLoopDialog">取 消</el-button>
          <el-button type="primary" @click="submitAddLoopDialog">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 4添加详情图 -->
      <el-dialog title="添加详情图" :visible.sync="addProdialog" width="452px" :before-close="closeAddProDialog">
        <div>
          <el-form ref="addProRef" :model="formart" label-width="80px">
            <el-form-item label="详情图">
              <el-upload action="aa" :on-remove="picRemove" :on-change="picChange" class="upload-demo" multiple
                ref="proAddList" :auto-upload="false" :file-list="fileList" list-type="picture">
                <el-button size="small" icon="el-icon-upload">点击上传</el-button>
              </el-upload>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="closeAddProDialog">取 消</el-button>
          <el-button type="primary" @click="submitAddProDialog">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
// 获取其他页面接口，轮播图
import { getLinkUrl2 } from "network/banner";
// 获取该页面接口
import {
  getProductList, //获取商品列表
  updateBanner, //更新商品上下架状态
  listProductDetail, //获取商品详情
  updatepro, //更新商品详情
  addOrEditFormat, //添加/更新商品规格
  delOrUpdate, //删除/启用/禁用商品轮播图/详情图
  addLoop, //轮播图添加
  addDeailPic, //详情图添加
} from "../../network/productManage";
import {
  getCategroy,

} from "network/product";
let that;
export default {
  data() {
    return {
      url: "https://zbz-imgs.oss-cn-beijing.aliyuncs.com/",
      productId: '',
      //弹框显隐
      addDialogVisible: false,
      //添加弹框显隐12
      addFormartdialog: false,
      addLoopdialog: false,
      addProdialog: false,
      // 选框列表
      checkList: [],
      checkList2: [],
      checkList3: [],
      checkList4: [],
      pageSize: 20,
      totalCount: 0,
      pageNumber: 1,
      // 详情弹窗头部
      activeName: "first",
      dataList: [],
      //弹窗列表1表单ref
      productPicture: "",
      productPic: "",
      firstForm: {},
      // 列表2表格数据
      formarts: [],
      formart: {
        file: '',
        imageUrl: ''
      },
      // 列表3
      //表格数据
      formData3: [],
      // 列表3添加轮播图
      fileList: [],
      linkUrlArr: [],
      //  列表4表格数据
      formData4: [],

      productStatus: '-1',
      productName: '',
      cateList: [],//分类
    };
  },
  created() {
    this.getList()
    this.getProductList();
    that = this
  },
  methods: {
    // 获取分类列表
    getList() {
      getCategroy({
        shopId: sessionStorage.shop_id
      }).then(res => {
        console.log(res);
        this.cateList = res.data
      });
    },

    delformSecond() {

    },


    // 点击打开详情// 获取商品信息回显  "product": [], "formats": [],"banner": []
    detailMessage(row) {
      this.productId = row.productId
      console.log(row);

      // 页面名称：获取名称，回显信息
      this.firstForm = {
        productId: row.productId,
        productName: row.productName,
        productTitle: row.productTitle,
        inventory: row.inventory,
        productSort: row.productSort,
        productPrice: row.productPrice,
        productSales: row.productSales,
        categoryId: row.categoryId,
        productFlag: row.productFlag.trim(),
        prop: "",
        file: '',
        imageUrl:
          this.url +
          "zhonghui/product/" +
          row.productPic,
        productPic: row.productPic

      };
      console.log(this.firstForm);

      this.getProDetail(this.productId)
    },

    getProDetail(id) {

      listProductDetail({
        productId: id,
      }).then((res) => {
        // 赋值给规格部分
        res.data.formats.forEach(item => {
          item.imageUrl = this.url +
            "zhenghui/format/" +
            item.formatImg

          item.formart_pic = ''
        })

        this.formarts = res.data.formats;
        console.log(this.formarts);
        // 赋值给轮播图部分
        this.formData3 = res.data.banner.filter((item) => item.picFlag === 0);
        console.log(this.formData3)
        // 赋值给详情图部分
        this.formData4 = res.data.banner.filter((item) => item.picFlag === 1);


        this.addDialogVisible = true;


      });
    },

    // 弹框
    cancelBox() {
      this.$refs.form.resetFields();
      this.$refs.addForm.clearFiles();
      this.addDialogVisible = false;
    },
    // 切换标签页
    handleClick(tab, event) {
      console.log(tab, event);
    },

    searchHandle() {
      this.pageNumber = 1
      this.pageSize = 20
      this.getProductList()
    },
    // 获取数据ok
    getProductList() {
      // 连接口给后端传值
      getProductList({
        page: this.pageNumber,
        size: this.pageSize,
        shopId: sessionStorage.shop_id,
        productName: this.productName,
        productStatus: this.productStatus,
      }).then((res) => {
        console.log(res);
        console.log(res.data.productPic);
        // 给页面绑定的列表传值
        this.totalCount = res.data.total;
        this.dataList = res.data.list;
      });
    },
    // 获取轮播图
    getUrls() {
      getLinkUrl2({
        shopId: 0,
      })
        .then((res) => {
          this.linkUrlArr = res.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    // 更新上下架状态ok
    updateBanner(flag) {
      // 用长度来判断
      if (this.checkList.length === 0) {
        this.$message.warning("请选择需要操作的数据");
        return;
      }
      console.log(this.checkList);
      //   定义一个空的变量放置ids
      var ids = "";

      this.checkList.forEach((item) => {
        ids += item.productId + ",";
      });
      updateBanner({
        ids,
        productStatus: flag,
      }).then((res) => {
        if (res.flag) {
          this.getProductList();
          this.$message.warning("更新状态成功");
        }
        console.log(res);
      });
    },

    // 1点击确定，更新当前商品详情信息 ref=firstRef 接口/product/updatepro
    firstProOk() {
      this.$refs.firstRef.validate((valid) => {
        if (valid) {
          console.log(this.firstForm);
          let fd = new FormData();
          fd.append("productId", this.firstForm.productId); //
          fd.append("productName", this.firstForm.productName); //商品名称
          fd.append("productTitle", this.firstForm.productTitle); //副标题
          fd.append("productSort", this.firstForm.productSort);
          fd.append("inventory", this.firstForm.inventory);
          fd.append("productPrice", this.firstForm.productPrice);
          fd.append("productSales", this.firstForm.productSales);
          fd.append("productFlag", this.firstForm.productFlag);
          fd.append("categoryId", this.firstForm.categoryId);

          if (this.firstForm.file != '') {
            fd.append('file', this.firstForm.file)
          }

          console.log(fd);
          updatepro(fd).then((res) => {
            console.log(res);
            if (res.flag) {
              this.getProductList();
              this.closefirstPro();
              this.$message.success("更新商品详情信息上传成功");
            } else {
              console.log(res);
              this.$message.error("上传失败");
            }
          });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 关闭
    closefirstPro() {
      this.$refs.firstRef.resetFields();
      // this.$refs.firstRefPic.clearFiles();
      this.paras = [];
      this.formarts = [];
      this.proList = [];
      this.loopList = [];
      this.addDialogVisible = false;
    },
    // 2点击确定，更新产品规格 // 切换2的  点击确定，更新产品规格信息
    submitAddFormartDialog() {
      this.$refs.addFormartRef.validate((valid) => {
        if (!valid) return false;
        console.log(this.formart);


        let fd = new FormData();
        fd.append("productId", this.productId);
        fd.append("formatName", this.formart.formart_name);
        fd.append("formatPrice", this.formart.formart_price);
        fd.append("formatInventory", this.formart.inventory);
        fd.append("formatSpecial", this.formart.format_VipPrice);

        fd.append('formatPic', this.formart.file)

        fd.append("flag", "add");
        addOrEditFormat(fd)
          .then((res) => {
            if (res.flag) {
              this.getProDetail(this.productId);
              this.closeAddFormartDialog();
              this.$message.success("添加规格成功");
            } else {
              this.$message.error("失败");
            }
          })
          .catch((error) => {
            console.log(error);
          });
      });
    },
    // 2 列表右侧的保存按钮
    subformSecond(formart) {
      console.log(formart);


      let fd = new FormData();
      fd.append("formatId", formart.formatId);
      fd.append("productId", formart.productId);
      if (formart.formart_pic != "") {
        fd.append("formatPic", formart.formart_pic);
      }
      fd.append("formatName", formart.formatName);
      fd.append("formatPrice", formart.formatPrice);
      fd.append("formatInventory", formart.formatInventory);
      fd.append("formatSpecial", formart.formatSpecial);
      fd.append("flag", "edit");


      addOrEditFormat(fd)
        .then((res) => {
          if (res.flag) {
            this.getProDetail(this.productId)
            this.closeAddFormartDialog();
            this.$message.success("更新产品规格成功");
          } else {
            this.$message.error("失败");
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    closeAddFormartDialog() {
      this.addFormartdialog = false;
    },
    // 3点击确定，添加轮播图
    submitAddLoopDialog() {
      this.addLoopdialog = true;
      var formData = new FormData();
      formData.append("productId", this.productId);
      for (var i = 0; i < this.loopList.length; i++) {
        formData.append("bannerPic", this.loopList[i]);
      }
      addLoop(formData).then((res) => {
        console.log(res);
        if (res.flag) {
          this.$message.success("轮播图添加成功");
          this.closeAddLoopDialog();
          this.getProDetail(this.productId)
        } else {
          console.log(res);
          this.$message.success("上传失败");
        }
      });
    },
    closeAddLoopDialog() {
      this.$refs.addLoopRef.resetFields();
      this.$refs.loopAddList.clearFiles();
      this.addLoopdialog = false;
    },
    // 4点击确定，添加详情图
    submitAddProDialog() {
      var formData = new FormData();
      console.log(this.productId);
      formData.append("productId", this.productId);
      for (var i = 0; i < this.proList.length; i++) {
        formData.append("detailPic", this.proList[i]);
      }
      console.log(formData);
      addDeailPic(formData).then((res) => {
        console.log(res);
        if (res.flag) {
          this.$message.success("详情图添加成功");
          this.closeAddProDialog();
          this.getProDetail(this.productId)
        } else {
          console.log(res);
          this.$message.success("上传失败");
        }
      });
    },
    // 关闭详情
    closeAddProDialog() {
      this.$refs.addProRef.resetFields();
      this.$refs.proAddList.clearFiles();
      this.addProdialog = false;
    },

    //  轮播图状态更换
    threeSwitchStatus(flag) {
      if (this.checkList3.length === 0) {
        this.$message.warning("请选择需要操作的数据");
        return;
      }
      console.log(this.checkList3);
      // 定义一个空的变量放置ids
      var ids3 = "";
      this.checkList3.forEach((item) => {
        ids3 += item.picId + ",";
      });
      console.log(this.ids3);
      delOrUpdate({
        // 测试的时候填写
        ids: ids3,
        picFlag: 0,
        picStatus: flag,
      }).then((res) => {
        if (res.flag) {
          this.getProDetail(this.productId)
          this.$message.warning("轮播图更新状态成功");
        }
        console.log(res);
      });
    },

    // 详情图状态更换
    fourSwitchStatus(flag) {
      if (this.checkList4.length === 0) {
        this.$message.warning("请选择需要操作的数据");
        return;
      }
      console.log(this.checkList4);
      var ids4 = "";
      this.checkList4.forEach((item) => {
        ids4 += item.picId + ",";
      });
      delOrUpdate({
        ids: ids4,
        picFlag: 1,
        picStatus: flag,
      }).then((res) => {
        if (res.flag) {
          this.getProDetail(this.productId)
          this.$message.warning("详情图更新状态成功");
        }
        console.log(res);
      });
    },


    // 切换2的图片点击
    formartChange(file, fileList, i) {
      this.formarts[i].uploadImg = URL.createObjectURL(file.raw);
      this.formarts[i].formart_pic = file.raw;
      console.log(this.formarts);
    },

    // 切换2规格的添加按钮
    secondAdd() {
      this.addFormartdialog = true;
      this.formart.file = ''
      this.formart.imageUrl = ''

    },
    forPicChange(file) {
      this.formart.imageUrl = URL.createObjectURL(file.raw);
      this.formart.file = file.raw;

      console.log(this.formart);

    },
    // 切换3的按钮
    thirdAdd() {
      this.addLoopdialog = true;
    },

    // 切换4的按钮 ,表格点击
    fourAdd() {
      this.addProdialog = true;
    },

    // 切换3的新弹窗
    loopRemove(file, fileList) {
      let list = [];
      for (let i = 0; i < fileList.length; i++) {
        list.push(fileList[i].raw);
      }
      this.loopList = list;
    },

    loopChange(file, fileList) {
      let list = [];
      for (let i = 0; i < fileList.length; i++) {
        list.push(fileList[i].raw);
      }
      this.loopList = list;
    },

    picRemove(file, fileList) {
      let list = [];
      for (let i = 0; i < fileList.length; i++) {
        list.push(fileList[i].raw);
      }
      this.proList = list;
    },
    picChange(file, fileList) {
      let list = [];
      for (let i = 0; i < fileList.length; i++) {
        list.push(fileList[i].raw);
      }
      this.proList = list;
    },

    // 点击数据
    selectChange(val) {
      this.checkList = val;
    },
    selectChange2(val) {
      this.checkList2 = val;
    },
    selectChange3(val) {
      this.checkList3 = val;
      console.log(this.checkList3);
    },
    selectChange4(val) {
      this.checkList4 = val;
    },
    // 详情页切换一，传图
    proChange(file) {
      this.firstForm.uploadImg = URL.createObjectURL(file.raw);
      this.firstForm.file = file.raw;
    },
    //每页N条发生改变
    sizeChange(val) {
      this.pageSize = val;
      this.loading = true;
      this.getProductList();
    },
    // 页码发生改变
    currentChange(val) {
      this.pageNumber = val;
      this.loading = true;
      this.getProductList();
    },
  },
  filters: {
    getCateName(val) {
      var name = ''
      that.cateList.forEach(ele => {
        if (ele.categoryId == val) {
          name = ele.categoryName
        }
      })
      return name
    },
  }
};
</script>

<style>
/* 导航1 */
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.btn-box {
  display: flex;
  justify-content: flex-end;
  width: 100%;
  margin-bottom: 20px;
}
</style>
